<!-- 绑定户号 -->
<template>
	<view class="usernumber-add-dom">
		<uni-card :is-shadow="false" spacing="0" margin="0">
			<uni-forms ref="formref" :modelValue="formdata" :rules="formrules" class="p20 mb10">
				<uni-forms-item label="户 号" name="yhbh" required>
					<uni-easyinput v-model="formdata.yhbh" placeholder="户号" />
				</uni-forms-item>
				<uni-forms-item label="手机号" name="dlzh" required>
					<uni-easyinput v-model="formdata.dlzh" placeholder="手机号" disabled />
				</uni-forms-item>
				<uni-forms-item label="验证码" name="sjyzm" required>
					<uni-easyinput v-model="formdata.sjyzm" placeholder="短信验证码">
						<template #right>
							<button @click="getSMSCode" type="primary" size="mini" style="margin-right: 5px;">
								{{time > 1 ? time + 's后重发' : '获取验证码'}} </button>
						</template>
					</uni-easyinput>
				</uni-forms-item>
			</uni-forms>
		</uni-card>
	</view>
	<view class="p20">
		<button @click="formFubmit" block type="primary" native-type="submit">提交</button>
	</view>
	<uni-card :is-shadow="false" spacing="0" margin="6">
		<uni-section title="如何查询户号？" titleFontSize="16px" type="line"></uni-section>
		<view style="font-size: 12px; color: #909399;"> 1、如果您办理了短信通知业务，可以在短信内容里找到; </view>
		<view style="font-size: 12px; color: #909399;"> 2、之前的电费账单里面可以找到； </view>
		<view style="font-size: 12px; color: #909399;"> 3、请到当地营业厅或者拨打营业厅电话查询。 </view>
	</uni-card>
</template>

<script setup lang="ts">
	import { getPhone, getJgbm } from "@/utils/storage";
	import { BangDinHuHao } from "@/api/request/BangDinHuHao";
	import { SendPhoneCode } from "@/api/request/SendPhoneCode";
	import { ref, onBeforeUnmount } from 'vue';
	let timer = null
	const time = ref(0)
	let formref = ref(null)
	let formdata = ref({
		yhbh: '',
		dlzh: getPhone(),
		sjyzm: '',
	})
	let authcode = ref('')
	const formrules = {
		yhbh: { rules: [{ required: true, errorMessage: '请输入户号' }] },
		dlzh: {
			rules: [
				{ required: true, errorMessage: '请输入手机号' },
				{ pattern: /^1[3456789]\d{9}$/, errorMessage: '手机号码格式错误！' },
			]
		},
		sjyzm: { rules: [{ required: true, errorMessage: '请输入短信验证码' }] },
	}

	function getSMSCode() {
		if (time.value > 1) {
			return
		} else {
			startTimer(60)
			let code = Number(String(Math.random()).substr(2, 6)) + ''
			SendPhoneCode({
				data: {  fshm: '15587431336', code },
				success: (res) => {
					authcode.value = code
				}
			})
		}
	}

	function formFubmit() {
		formref.value.validate().then(res => {
			if(authcode.value != res.sjyzm){
				uni.showToast({icon: "none",  title: '请输入正确的验证码' })
				return
			}
			BangDinHuHao({
				data: {
					yxyh: {
						jgbm: getJgbm(),
						dlzh: res.dlzh,
						yhbh: res.yhbh,
					}
				},
				success: () => {
					uni.$emit('addUpdate')
					uni.showToast({ icon: "success", title: '添加成功' })
					uni.navigateBack({
						delta: 1
					})
				}, fail: (code, message) => {
					uni.showToast({ icon: "none", title: message })
				}
			})
		}).catch(err => {
			// console.log('表单错误信息：', err);
			uni.showToast({ icon: "none", title: err[0].errorMessage })
		})
	}

	onBeforeUnmount(() => {
		closeTimer()
	})

	// 开启定时器
	const startTimer = (currentTime: number) => {
		timer && clearInterval(timer)
		time.value = currentTime
		timer = setInterval(() => {
			time.value--
			console.log(time.value)
			if (time.value < 1) {
				timer && clearInterval(timer)
			}
		}, 1000)
	}
	// 关闭定时器 例如跳转页面，或者新的点击事件需要关闭定时器
	const closeTimer = () => {
		timer && clearInterval(timer)
		timer = null;
	}
</script>

<style lang="scss" scoped>
	.usernumber-add-dom {}
</style>